<h1>User list
  <div class="float-right">
    <button routerLink="/management/users/add/" type="button" class="btn btn-primary">
      <i class="fas fa-plus-circle"></i> Add new user
    </button>
  </div>
  <div class="clearfix"></div>
</h1>
<hr/>
<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table">
  <thead>
  <tr>
    <th scope="col">Public ID</th>
    <th scope="col">Username</th>
    <th scope="col">Display</th>
    <th scope="col">Firstname</th>
    <th scope="col">Lastname</th>
    <th scope="col">Group</th>
    <th scope="col">Action</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let user of userList">
    <th scope="row">{{user?.public_id}}</th>
    <td><a [routerLink]="['/management/users/view/', user?.public_id]">{{user?.user_name}}</a></td>
    <td>
      <cmdb-user-display [user]="user"></cmdb-user-display>
    </td>
    <td>{{user?.first_name}}</td>
    <td>{{user?.last_name}}</td>
    <td>{{findGroup(user.group_id).label}}</td>
    <td>
      <a class="text-dark" [routerLink]="['/management/users/edit/', user.public_id]">
        <fa-icon [icon]="['far', 'edit']"></fa-icon>
      </a>
      <a class="text-dark ml-2" (click)="openDeleteModal(user)">
        <fa-icon [icon]="['fas', 'key']"></fa-icon>
      </a>
      <a class="text-dark ml-2" *ngIf="user?.public_id > 1 && user?.public_id !== currentUser.public_id"
         [routerLink]="['/management/users/delete/', user.public_id]">
        <fa-icon [icon]="['far', 'trash-alt']"></fa-icon>
      </a>

    </td>
  </tr>
  </tbody>
</table>
